import { Button } from '@/components/ui/button';
import { prisma } from '@/lib/prisma'
import Link from 'next/link';
import React from 'react'

async function Page() {
    const posts = await prisma.post.findMany({
        orderBy: { createAt: "desc" },
    });
    return (
        <div className='max-w-4xl mx-auto p-8'>
            <div className='flex justify-between items-center mb-8'>
                <h1 className='text-3xl font-bold'>
                    Posts
                </h1>
                <Link href="/">
                    <Button>Create Post</Button>
                </Link>
            </div>

            <div className='space-y-4'>
                {posts.map((post) => (
                    <Link key={post.id} href={`/posts/${post.id}`}>
                        <div className='border rounded-lg p-6 hover:bg-slate-50'>
                            <h2 className='text-2xl font-bold'>
                                {post.title}
                            </h2>
                            <p className='text-sm text-slate-500 mt-2'>
                                {new Date(post.createAt).toLocaleDateString()}
                            </p>
                        </div>
                    </Link>
                ))}
            </div>
        </div>
    )
}

export default Page